<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstarp/css/bootstrap.min.css">
    <style>
        .container {
            width: 1200px;
        }

        .media .media-left a img {
            width: 100px;
        }

        .media>p {
            text-align: center;
            /* height: 100px; */
            line-height: 100px;
        }
        .row p i{
            text-align: center;
        }
        .uladd {
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <p >
                <i class="col-md-1 col-xs-1 col-sm-1"><input type="checkbox" >全选 </i>商品种类：2 所选商品数量：0 所选商品价格：0 &nbsp&nbsp&nbsp
                <button type="button" class="btn btn-primary btn-sm">结算</button>
                <button type="button" class="btn btn-default btn-sm">清空购物车</button>
            </p>
        </div>
        <div class="row">
            <ul class="media-list">
                <li class="media ">
                    <p class="col-md-1 col-xs-1 col-sm-1"> <input type="checkbox"></p>
                    <div class="media-left ">
                        <a href="#">
                            <img class="media-object"
                                src="https://image3.suning.cn/uimg/b2c/newcatentries/0070156358-000000000665283220_1_200x200.jpg"
                                alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">YSL伊夫·圣罗兰持久亮泽指甲油(6# 10ml) </h4>
                        <p><i class="glyphicon glyphicon-usd"></i>1234</p>

                        <button type="button" class="btn btn-danger col-md-1">删除商品</button>
                        <ul class="pagination uladd">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">-</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">+</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="row">
            <ul class="media-list">
                <li class="media ">
                    <p class="col-md-1 col-xs-1 col-sm-1"> <input type="checkbox"></p>
                    <div class="media-left ">
                        <a href="#">
                            <img class="media-object"
                                src="https://image3.suning.cn/uimg/b2c/newcatentries/0070156358-000000000665283220_1_200x200.jpg"
                                alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">YSL伊夫·圣罗兰持久亮泽指甲油(6# 10ml) </h4>
                        <p><i class="glyphicon glyphicon-usd"></i>1234</p>
                        <p>
                            <button type="button" class="btn btn-danger col-md-1">删除商品</button>

                            <ul class="pagination uladd">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">-</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">+</span>
                                    </a>
                                </li>
                            </ul>

                        </p>

                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>